<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7">
    <title>悦定后台管理系统</title>

    <!--判断是否登陆-->
    <script type="text/javascript" src="../../vendor/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="../../js/config.js"></script>
    <script type="text/javascript" src="../../js/jquerySession.js"></script>
    <!--<script type="text/javascript">-->
    <!--if ($.session.get('token') == null) {-->
    <!--alert("用户未登录！");-->
    <!--window.location.href = "../../login.html"-->
    <!--}-->
    <!--</script>-->

    <link href="../../css/common.css" rel="stylesheet">
    <link href="../../css/layout.css" rel="stylesheet">
    <link href="../../css/style_fy.css" rel="stylesheet">
    <script language="javascript" type="text/javascript" src="../../js/admin_common.js"></script>
    <script language="javascript" type="text/javascript" src="../../js/styleswitch.js"></script>
    <script language="javascript" type="text/javascript" src="../../js/formvalidator.js" charset="UTF-8"></script>
    <script language="javascript" type="text/javascript" src="../../js/formvalidatorregex.js" charset="UTF-8"></script>
    <script charset="utf-8" src="../../vendor/kindeditor-all.js"></script>
    <script charset="utf-8" src="../../vendor/zh-CN.js"></script>

    <script>
        var editor;
        KindEditor.ready(function (K) {
            editor = K.create('textarea[name="content"]', {
                uploadJson: baseUrl + '/uploadImage',//上传
//                fileManagerJson: 'http://127.0.0.1:8080/api/v1/fileUpload1',//文件管理
                allowFileManager: false,
                afterBlur: function () {
                    this.sync();
                }  //数据同步
            });

        });
    </script>
    <script type="text/javascript">
        window.focus();
    </script>
    <link href="../../css/default.css" rel="stylesheet" type="text/css">
    <style type="text/css">
        .uploader {
            position: relative;
            display: inline-block;
            overflow: hidden;
            cursor: default;
            padding: 0;
            margin-left: 50px;
            margin-bottom: 10px;
            -moz-box-shadow: 0px 0px 5px #ddd;
            -webkit-box-shadow: 0px 0px 5px #ddd;
            box-shadow: 0px 0px 5px #ddd;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border-radius: 5px;
        }

        .filename {
            float: left;
            display: inline-block;
            outline: 0 none;
            height: 32px;
            width: 220px;
            margin: 0;
            padding: 8px 10px;
            overflow: hidden;
            cursor: default;
            border: 1px solid;
            border-right: 0;
            font: 9pt/100% Arial, Helvetica, sans-serif;
            color: #777;
            text-shadow: 1px 1px 0px #fff;
            text-overflow: ellipsis;
            white-space: nowrap;
            -moz-border-radius: 5px 0px 0px 5px;
            -webkit-border-radius: 5px 0px 0px 5px;
            border-radius: 5px 0px 0px 5px;
            background: #f5f5f5;
            background: -moz-linear-gradient(top, #fafafa 0%, #eee 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fafafa), color-stop(100%, #f5f5f5));
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa', endColorstr='#f5f5f5', GradientType=0);
            border-color: #ccc;
            -moz-box-shadow: 0px 0px 1px #fff inset;
            -webkit-box-shadow: 0px 0px 1px #fff inset;
            box-shadow: 0px 0px 1px #fff inset;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        .button {
            float: left;
            height: 32px;
            display: inline-block;
            outline: 0 none;
            padding: 8px 12px;
            margin: 0;
            cursor: pointer;
            border: 1px solid;
            font: bold 9pt/100% Arial, Helvetica, sans-serif;
            -moz-border-radius: 0px 5px 5px 0px;
            -webkit-border-radius: 0px 5px 5px 0px;
            border-radius: 0px 5px 5px 0px;
            -moz-box-shadow: 0px 0px 1px #fff inset;
            -webkit-box-shadow: 0px 0px 1px #fff inset;
            box-shadow: 0px 0px 1px #fff inset;
        }

        .uploader input[type=file] {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            border: 0;
            padding: 0;
            margin: 0;
            height: 30px;
            cursor: pointer;
            filter: alpha(opacity=0);
            -moz-opacity: 0;
            -khtml-opacity: 0;
            opacity: 0;
        }

        input[type=button]::-moz-focus-inner {
            padding: 0;
            border: 0 none;
            -moz-box-sizing: content-box;
        }

        input[type=text]::-moz-focus-inner {
            padding: 0;
            border: 0 none;
            -moz-box-sizing: content-box;
        }

    </style>

    <style type="text/css">
        html {
            _overflow-y: scroll
        }

        body {

            background: #fff;

        }

        .add_btn {

            height: 60px;
            border-bottom: 1px solid #f2f2f2;

        }

        .add_btn button {

            width: 120px;
            height: 40px;
            margin-top: 10px;
            font-size: 20px;
            font-family: '微软雅黑';
        }

        .add_input_list {

            float: left;
            margin: 10px;

        }

        .add_input_list li {

            height: 40px;
            line-height: 40px;
            margin: 20px;

        }

        .add_input_list li input {

            width: 300px;
            height: 40px;
            border: 0px;
            padding-left: 10px;
            font-size: 18px;
            box-shadow: 0 0 1px #343434;

        }

        #matchCheckbox{

            width: 18px;
            height: 18px;
            border: 0px;
            box-shadow: 0 0 ;

        }

    </style>
</head>
<body>


<!--头部-->
<div class="header" style="position: relative">
    <div class="logo"></div>
    <h1 class="logo">
        <a href="../user/participant.html" title="添加公告"><img src="../../images/logo.png" title="添加公告"></a>
    </h1>
    <div class="menu">
        <ul>

            <li class="current">
                <a href="#">发布比赛</a>
            </li>
        </ul>
    </div>
</div>

<!--添加比赛-->

<form name="myform" id="myform">

    <div class="uploader white" style="margin-top: 20px;">
        <input type="text" class="filename" readonly style="border: 0px;border-radius: 5px;width: 180px"/>
        <input type="button" class="button" value="上传..." style="border: 0px"/>
        <input type="file" size="30" name="file" id="file"/>
    </div>


    <div style="clear: both"></div>

    <ul class="add_input_list" style="margin-right: 0px">

        <li>比赛名称：</li>
        <li>比赛地点：</li>
        <li>主办方：</li>
        <li>电话号码：</li>
        <li>报名价格：</li>

    </ul>

    <ul class="add_input_list" style="margin-left: 0px">

        <li><input type="text" name="matchName" id="matchName" placeholder="比赛名称"/></li>
        <li><input type="text" name="matchPlace" id="matchPlace" placeholder="比赛地点"/></li>
        <li><input type="text" name="sponsor" id="sponsor" placeholder="主办方"/></li>
        <li><input type="text" name="phone" id="phone" placeholder="电话号码"/></li>
        <li><input type="text" name="price" id="price" placeholder="格式为数字，如1、1.0、1.01"/></li>

    </ul>


    <ul class="add_input_list" style="margin-right: 0px">


        <li>报名开始日期：</li>
        <li>报名截止日期：</li>
        <li>比赛开始日期：</li>
        <li>比赛结束日期：</li>
        <li><label for="matchCheckbox">是否标记为轮播图：</label></li>

    </ul>

    <ul class="add_input_list" style="margin-left: 0px">


        <li><input type="date" name="enroll_startDate" id="enroll_startDate" placeholder="报名开始日期"/></li>
        <li><input type="date" name="enroll_endDate" id="enroll_endDate" placeholder="报名截止日期"/></li>
        <li><input type="date" name="match_startDate" id="match_startDate" placeholder="比赛开始日期"/></li>
        <li><input type="date" name="match_endDate" id="match_endDate" placeholder="比赛结束日期"/></li>
        <li ><input type="checkbox" name="isMarkAsThumbnail" value="isMarkAsThumbnail" id="matchCheckbox"/></li>
    </ul>
    <div style="margin-left: 20px">
        <textarea id="editor_id" name="content"
                  style="width: 90%; max-width: 1000px; height: 400px; display: none;overflow-y: hidden"></textarea>
    </div>
</form>


<div class="add_btn">
    <button class="btn ml17 btn-primary" onclick="addMatch()">发布</button>
</div>

<script type="text/javascript">
    $(function () {

        //图片文件大小控制
        $("#file").change(function () {
            var fileInput = $("#file")[0];
            var byteSize = fileInput.files[0].size;
            if (byteSize > 1024 * 1024) {
                alert("图片大小超过1M");
                $("#file").val("");
            }
        });

        $("input[type=file]").change(function () {
            $(this).parents(".uploader").find(".filename").val($(this).val());
        });

        $("input[type=file]").each(function () {
            if ($(this).val() == "") {
                $(this).parents(".uploader").find(".filename").val("请选择文件...");
            }
        });

    });

    function addMatch() {
        var matchTitle = $("#matchName").val();
        var matchPlace = $("#matchPlace").val();
        var matchSponsor = $("#sponsor").val();
        var matchPhone = $("#phone").val();
        var price = $('#price').val();
        var enrollStart = $("#enroll_startDate").val();
        var enrollEnd = $("#enroll_endDate").val();
        var matchStart = $("#match_startDate").val();
        var matchEnd = $("#match_endDate").val();
        var matchContent = $('#editor_id').val();
        var formData = new FormData();
        formData.append('file', $('#file')[0].files[0]);
        formData.append('name', matchTitle);
        formData.append('matchPlace', matchPlace);
        formData.append('sponsor', matchSponsor);
        formData.append('phoneNumber', matchPhone);
        formData.append('price', price);
        formData.append('enrollStart', enrollStart);
        formData.append('enrollEnd', enrollEnd);
        formData.append('matchStart', matchStart);
        formData.append('matchEnd', matchEnd);
        formData.append('introduction', matchContent);
        if($('#matchCheckbox').prop("checked")){
            formData.append('isMarkAsThumbnail', $('#matchCheckbox').val());
        }
        $.ajax({
            type: "POST",
            url: v2 + "/matches",
            data: formData,
            processData: false,
            contentType: false,
            success: function (json) {
                if (json.meta.code == "200") {
                    alert("添加成功！");
                    layer.close(index);
                    window.location.reload();
                }
            },
            error: function (data) {
                alert("error:" + "修改失败，可能未选择文件");
            }
        });
    }
</script>
</body>

</html>